<template>
    <div class="login-container login-container--new kf-login-container" data-v-7moor
         :style="loginBg">
      <div class="mid-autumn-title"></div>
      <div class="login">
          <div class="logo">
            <div style="width: 100vw">
              <div class="left">
                <a href="//www.7moor.com/" target="_blank">
                  <div class="logo-7moor"></div>
                  <div class="title" v-html="$t('login.name7M')"></div>
                </a>
              </div>
              <div class="center" style="position: absolute">
                <span style="padding-right: 30px" v-html="$t('login.custServiceHotline')"></span>
                <span>{{$t('login.technicalSupportEmail')}}</span>
              </div>
              <i18n class="i18n" v-if="!loading"
                    @changeLang="changeLang">
              </i18n>
            </div>
          </div>
        <div class="notify" v-if="notifyFlag">
          <div class="content">
            {{notify.content}}<a :href="notify.href" target="_blank" v-if="notify.href" class="notify-a">立即查看</a>
          </div>
          <div class="close" @click.stop="closeNotify" style="cursor: pointer">X</div>
        </div>
        <el-row class="login-box login-qingming">
          <!--左侧插图-->
          <div class="activity-bg1" v-if="imgurl">
            <img :src="imgurl" class="activity-img">
          </div>
          <!-- 登陆组件-->
          <login ref="login"></login>
        </el-row>
        <el-row class="footer">
          <bottom :updateVer="updateVer" @closeUpdate="closeUpdate"></bottom>
        </el-row>
          <!-- 浏览器推荐 -->
          <browser></browser>
          <active-page></active-page>
           <!--<v-editor></v-editor>-->
        <el-dialog
                custom-class="verify_dialog"
                :visible.sync="verifyShow"
                width="402px"
                :show-close="false"
                :close-on-click-modal="false">
          <verifyBox
                  class="verify_box"
                  @success="verifyAlert('success')"
                  @error="verifyAlert('error')"
                  :type="4"
                  :imgUrl="'/img/'"
                  :imgName="['1.jpg', '2.jpg']"
                  :vSpace="5"
          ></verifyBox>
        </el-dialog>
      </div>
    </div>
</template>

<script>
import eleLocaleZhCN from 'element-ui/lib/locale/lang/zh-CN'
import eleLocaleZhTW from 'element-ui/lib/locale/lang/zh-TW'
import eleLocaleEn from 'element-ui/lib/locale/lang/en'
import I18n from './I18nSelect'
import Browser from './Browser'
import Vue from 'vue'
import Login from './login.vue'
import ActivePage from './ActivePage.vue'
import Bottom from './Footer'
import verifyBox from '@/components/public-modules/verify/index'
import * as types from '@/store/mutation-types.js'
// import IdentifyCode from './IdentifyCode'
// import Editor from '../../ui-modules/editor/Editor'
export default {
  name: 'login-kf',
  components: {
    Login,
    I18n,
    Browser,
    Bottom,
    verifyBox,
    ActivePage
  },
  data () {
    return {
      flag: false,
      cont: '',
      isEnglish: 'zh_CN',
      loading: true,
      count: 0
    }
  },
  computed: {
    lang () {
      if (this.$store.state.lang === '') {
        return 'zh_CN'
      } else {
        return this.$store.state.lang
      }
    },
    imgurl () {
      return this.$store.state.iframeMessage.loginMessage.loginLeftPhoto || ''
    },
    loginBg () {
      let _url = 'background-image:url(' + this.$store.state.iframeMessage.loginMessage.loginBg || '#' + ')'
      return _url
    },
    notifyFlag () {
      return this.$store.state.iframeNotify.notifyFlag
    },
    notify () {
      return this.$store.state.iframeNotify.notify
    },
    updateVer () {
      return this.$store.state.iframeNotify.updateVer
    },
    verifyShow () {
      return this.$store.state.verifyShow
    }
  },
  watch: {
  },
  methods: {
    closeUpdate () {
      // this.updateVer.updateVer = false
      this.$store.commit('UPDATEDATEVER', false)
      let _obj = {
        updateTime: this.updateVer.updateTime,
        updateVer: false
      }
      window.localStorage.setItem('notifyVersionUpdate', JSON.stringify(_obj))
    },
    closeNotify () {
      this.$store.commit('UPDATENOTIFYFLAG', false)
    },
    fetchData (lang, count = 0) {
      console.log(this.$store.state)
      let langTemp = ''
      if (!lang) {
        this.loading = false
        return null
      } else {
        langTemp = lang
      }
      let url = window.location.origin + '/static/i18n/locales/' + langTemp + '.json'
      let urlConfig = window.location.origin + '/static/i18n/locales/' + langTemp + '_Config.json'
      Promise.all([
          window.fetch(url + '?_=' + Math.random(), {
          method: 'get',
          headers: {
            'Content-Type': 'application/json'
          }
        }),
        window.fetch(urlConfig + '?_=' + Math.random(), {
          method: 'get',
          headers: {
            'Content-Type': 'application/json'
          }
        })
      ]).then(([response1, response2]) => {
        Promise.all([response1.json(), response2.json()])
        .then(([res1, res2]) => {
            let locales = ''
            switch (langTemp) {
              case 'zh_CN':
                locales = {...res1, ...res2, ...eleLocaleZhCN}
                this.$store.commit('SET_LABEL_POSITION', 'left')
                break
              case 'zh_TW':
                locales = {...res1, ...res2, ...eleLocaleZhTW}
                this.$store.commit('SET_LABEL_POSITION', 'left')
                break
              case 'en':
                locales = {...res1, ...res2, ...eleLocaleEn}
                this.$store.commit('SET_LABEL_POSITION', 'top')
                break
              default:
                locales = {...res1, ...res2, ...eleLocaleZhCN}
                this.$store.commit('SET_LABEL_POSITION', 'top')
                break
            }
            document.title = `${locales.routeI18n.login} - ${locales.login.cloudService}`
            this.$router.afterEach((route) => {
              let title = route.meta.title || ''
              document.title = `${locales.routeI18n[title]} - ${locales.login.cloudService}`
            })
            Vue.set(Vue.config, 'lang', langTemp || 'zh_CN')
            this.$i18n.setLocaleMessage(lang || 'zh_CN', locales)
            this.$i18n.locale = lang
            window.langJson = {...res1, ...res2} || {}
            this.loading = false
          }).catch(() => {
          if (this.count < 3) {
            this.fetchData(lang, this.count++)
          } else {
            window.alert('Network anomaly！！！ Please check your network')
          }
        })
      })
    },
    changeLang (lang) {
      this.$refs.login.changeLang(lang)
      this.fetchData(lang)
    },
    verifyAlert (data) {
      // window.alert(data)
      if (data === 'success') {
        this.$store.commit(types.SET_VERIFY_SHOW, false)
      }
    }
  },
  beforeDestroy () {
  },
  mounted () {
    // 解决手机端底部为白色的情况
    let node = document.getElementById('mainHtml')
    if (node) {
      node.style.backgroundColor = '#f9fafb'
    }
  },
  beforeMount () {
    this.$store.commit('UPDATELANG', window.localStorage.lang)
    this.fetchData()
  }
}
</script>
<style lang="stylus" scoped>
    @import "styl/_login"
    @import "../../../assets/common.styl"
    @keyframes fadeIn
      0%
        opacity: 0
      100%
        opacity: 1
    .activity-bg
      text-align center
      position: absolute;
      min-width: 1200px;
      height: 525px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    .login-news
      padding-left 20px
    .login-container
      height 100vh
      -webkit-user-select none
      background-color #f9fafb
    h1
    h2
      font-weight normal
    a
      color  $c-main
    .login
      font-size 12px
      width 100%
      height 100%
      display flex
      justify-content center
      align-items center
      flex-direction column
      .notify
        position: absolute;
        top: 65px;
        color: #1a1a1a;
        text-align: center;
        background-color: #b2daff;
        width: 100%;
        min-width 1200px
        z-index 104
        .notify-a
          color #fff
          margin-left: 10px;
          background-color #459ae9
          border-radius: 4px;
          padding: 2px 7px;
        .content
          font-size 14px
          padding: 10px;
          margin-right: 50px;
        .close
          position: absolute;
          top: 8px;
          right: 30px;
          font-size: 14px;
          color #fff
      .logo
        min-width: 1200px;
        height: 60px;
        position: absolute;
        top: 0px;
        background-color: #feffff;
        z-index 1000
        box-shadow: 0px 1px 2px #ccc;
        .left
          position absolute
          left 120px
          cursor pointer
          a
           color #666
          .title
            font-size: 16px;
            color: #666;
            margin-left: 40px;
            margin-top: 20px;
          .logo-7moor
            background url(img/login/logo1.png) no-repeat
            background-size 100%
            width: 34px;
            height: 36px;
            margin-top: 12px;
            float left
        .center
          position: absolute;
          right: 250px;
          top: 22px;
          color #666;
          -webkit-user-select: text;
          -moz-user-select: text;
          -ms-user-select: text;
          user-select: text;
    .login-box
        position relative
        margin-top 100px
    .vertical-line
        display inline-block
        height 290px
        width 1px
        background-color #99d0e3
        margin 0 46px
    .login-tip-size
        height 14px
        .active
            display block
    .i18n
      position: absolute
      top 12px
      right 120px
      width 90px
 .login_bg1
   margin-top 100px
 .login-fadein
   opacity 0
   animation-name: fadeIn
   -webkit-animation-duration: 0.5s
   animation-duration: 0.5s
   animation-fill-mode: forwards
   animation-delay:1s
.season-img
  position: absolute;
  width: 200px;
  height: 100px;
  top: 0px;
  left: 0px;
</style>
